<template>
  <basic-container>
    <avue-form class="text-form" ref="textForm" v-model="textForm" :option="textOption">
      <template slot="menuForm">
        <div class="btnWrap">
          <!-- <el-button
            icon="el-icon-download"
            type="primary"
            @click="handleSubmit"
            v-if="permissionList.exportBtn"
            >立即下载</el-button
          > -->
          <el-button
            icon="el-icon-download"
            type="primary"
            @click="handleSubmit"
            >导出</el-button
          >
          <el-button
            icon="el-icon-upload2"
            type="warning"
            size="small"
            @click="handleImport"
            >导入
          </el-button>
        </div>
      </template>
    </avue-form>
    <el-dialog
      title="数据导入"
      append-to-body
      :visible.sync="excelBox"
      width="555px"
    >
      <avue-form
        :option="excelOption"
        v-model="excelForm"
        :upload-after="uploadAfter"
      >
      </avue-form>
    </el-dialog>
  </basic-container>
</template>
  
  <script>
import { queryTenantOrderText } from "@/api/rb-oem/ysDealManagement/text";
import { downloadFileZip } from "@/util/util";
import { mapGetters } from "vuex";
import { dateFormat } from "@/util/date";

export default {
  data() {
    return {
      textForm: {},
      textOption: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 160, //弹出表单的标题的统一宽度
        // menuPosition: 'left',
        span: 11,
        column: [
          {
            label: "通道",
            prop: "aisleCode",
            type: "select",
            props: {
              label: "aisleName",
              value: "aisleCode",
              desc: "aisleCode",
            },
            filterable: true,
            dicUrl: `/api/rb-oem/oem/upload/upload/queryTenantAisle?current=-1&size=-1`,
            dicFormatter: (data) => {
              return data.data.list;
            },
            rules: [
              {
                required: true,
                message: "请选择通道",
                trigger: "change",
              },
            ],
            row: true,
          },
          {
            label: "对账单日期",
            type: "date",
            prop: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            hide: true,
            pickerOptions: {
              disabledDate(time) {
                let currentTime =
                  new Date(dateFormat(new Date(), "yyyy-MM-dd")).getTime() - 24;
                let t = new Date(dateFormat(time, "yyyy-MM-dd")).getTime();
                let pastTime = new Date(
                  dateFormat(
                    new Date(Date.now() - 3600 * 1000 * 24 * 90),
                    "yyyy-MM-dd"
                  )
                ).getTime();

                if (currentTime < t) {
                  return true;
                } else if (pastTime >= t) {
                  return true;
                } else {
                  return false;
                }
              },
            },
            rules: [
              {
                required: true,
                message: "请选择对账单日期",
                trigger: "change",
              },
            ],
          },
        ],
      },
      excelBox: false,
      excelForm: {},
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [{
          label: '表单上传',
          prop: 'excelFile',
          type: 'upload',
          drag: true,
          loadText: '数据上传中，请稍等',
          span: 24,
          propsHttp: {
            res: 'data'
          },
          tip: '请上传 .xls,.xlsx 标准格式文件',
          action: "/api/rb-oem/oem/upload/upload/import"
        }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        exportBtn: this.vaildData(this.permission.text_export, false),
        importBtn: this.vaildData(this.permission.text_import, false),
      };
    },
  },
  watch: {},
  created() {},
  methods: {
    // 导出
    handleSubmit() {
      let _this = this;
      _this.$refs.textForm.validate((vaild, done) => {
        if (vaild) {
          _this
            .$confirm("是否下载对账单数据?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
            .then(() => {
              let { aisleCode, date } = _this.textForm;
              queryTenantOrderText({ aisleCode, date }).then(
                (res) => {
                  downloadFileZip(res);
                  this.$message({
                    type: "success",
                    message: '操作成功',
                  });
                  _this.$refs.textForm.resetForm();
                  done();
                },
                (error) => {
                  window.console.log(error);
                  done();
                }
              );
            })
            .catch(() => {
              done();
            });
        }
      });
    },
    handleImport() {
      this.excelBox = true;
    },
    uploadAfter(res, done) {
      this.excelBox = false;
      done();
    },
  },
};
</script>

<style lang="scss" scoped>
.text-form {
  margin: 0 auto;
  position: relative;
	left: 25%;
}
/deep/ .avue-checkbox {
  display: flex !important;
}
.btnWrap {
  width: 25%;
  display: flex;
  justify-content: flex-end;
}
.alertWrap {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
/deep/ .el-alert {
  width: 420px !important;
  padding: 0 10px;
}
</style>
  
  